<template>
  <div class="login-page">
    <van-nav-bar title="注册" />

    <van-form @submit="onSubmit">
      <van-field
        v-model="body.account"
        name="account"
        label="账号"
        placeholder="账号"
        :rules="[
          { required: true, message: '请填写用户名' },
          { pattern: /^\w{4,}$/, message: '请输入至少4位的用户名' },
        ]"
      />

      <van-field
        v-model="body.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: /^\w{6,}$/, message: '请输入至少6位的密码' },
        ]"
      />

      <van-field
        v-model="body.email"
        type="email"
        name="email"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />

      <!-- <van-field
        v-model="body.code"
        type="code"
        name="code"
        label="验证码"
        placeholder="验证码"
        :rules="[
          { required: true, message: '请填写验证码' },
          { pattern: /^\w{6,}$/, message: '请输入至少6位的验证码' },
        ]"
      >
        <template #button>
          <van-button size="small" type="primary" @click="sendCode">{{
            timeCount === 0 ? "发送验证码" : `${timeCount}秒后可再次发送`
          }}</van-button>
        </template>
      </van-field> -->
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit">注册</van-button>
      </div>
    </van-form>
    <router-link class="link" to="/login">有账号，去登录</router-link>
  </div>
</template>

<script>
/* eslint-disable */
/* eslint-disable */
import { Toast, RadioGroup, Radio } from "vant";
import { visitor_register, visitor_page } from "@/api";
export default {
  name: "register-page",
  data() {
    return {
      body: {
        account: "",
        password: "",
        email: "",
      },
      visitorInfo: {
        account: [],
        email: [],
      },
    };
  },
  methods: {
    async onSubmit(values) {
      if (this.visitorInfo.account.includes(values.account)) {
        Toast.fail("该账号已存在！");
        return;
      }
      if (this.visitorInfo.email.includes(values.email)) {
        Toast.fail("该邮箱已存在！");
        return;
      }
      const currentTime = Date.now();
      try {
        const res = await visitor_register({
          ...values,
          name: `访客${currentTime}`,
        });
        Toast.success("注册成功");
        this.$router.push(`/login`);
        console.log(res);
      } catch (e) {
        console.log(e);
        Toast.fail("注册失败");
      }
    },
  },
  async created() {
    const res = await visitor_page();
    console.log("res", res);
    this.visitorInfo.account = res.data.list.map((item) => item.account);
    this.visitorInfo.email = res.data.list.map((item) => item.email);
    console.log("visitorInfo", this.visitorInfo);
  },
};
</script>

<style lang="less" scoped>
.link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
  float: right;
}
.radioBox {
  margin-left: 20px;
  margin-top: 10px;
}
</style>
